<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件委托</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html,body {
            height: 100%;
            overflow: hidden;
        }
        .center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        #root {
            width: 300px;
            height: 300px;
            background: lightblue;
        }
        #outer {
            width: 200px;
            height: 200px;
            background: lightgreen;
        }
        #inner {
            width: 100px;
            height: 100px;
            background: lightcoral;
        }
    </style>
</head>
<body>
    <div id="root" class="center">
        <div id="outer" class="center">
            <div id="inner" class="center"></div>
        </div>
    </div>
    <script>
        // 层级结构window => document => html => body => root => outer => inner
        // 事件传播机制：捕获阶段 =》目标阶段 =》冒泡阶段

        // 事件是浏览器赋予元素的默认行为
        // 事件绑定是给这个行为绑定方法
        // 即便我们没有给body的点击事件绑定方法，当我们点击body的时候，其点击行为也会被触发，只是什么都不做而已
        const html = document.documentElement,
            body = document.body,
            root = document.querySelector('#root'),
            outer = document.querySelector('#outer'),
            inner = document.querySelector('#inner');

            // true=捕获阶段触发
            // false=冒泡阶段触发
            root.addEventListener('click', function (ev) {
                console.log('root--捕获');
                ev.stopPropagation(); // 阻止事件传播 捕获 不会阻止当前元素绑定的其他方法
                // ev.stopImmediatePropagation(); // 会阻止当前元素绑定的其他方法
            }, true);
            root.addEventListener('click', function (ev) {
                console.log('root--第二次捕获');
            }, true);
            root.addEventListener('click', function () {
                console.log('root--冒泡');
            }, false);

            outer.addEventListener('click', function () {
                console.log('outer--捕获');
            }, true);
            outer.addEventListener('click', function () {
                console.log('outer--冒泡');
            }, false);

            inner.addEventListener('click', function () {
                console.log('inner--捕获');
            }, true);
            inner.addEventListener('click', function (ev) {
                console.log('inner--冒泡');
                ev.stopPropagation(); // 阻止事件传播 冒泡 不会阻止当前元素绑定的其他方法
                // ev.stopImmediatePropagation(); // 会阻止当前元素绑定的其他方法
            }, false);
            inner.addEventListener('click', function (ev) {
                console.log('inner--第二次冒泡');
            }, false);
    </script>
</body>
</html>